/*
 * @Author: yaoge233 1351192080@qq.com
 * @Date: 2024-12-23 00:18:14
 * @LastEditors: yaoge233 1351192080@qq.com
 * @LastEditTime: 2024-12-23 01:23:03
 * @FilePath: \react-learning\src\store\modules\channelStore.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

// 异步操作样板代码
// 1.创建store的写法保持不变，配置好同步修改状态的方法
// 2.单独封装一个函数，在函数内部return一个新函数，在新函数中
//    2.1 封装异步请求获取数据
//    2.2 调用同步actionCreater传入异步数据生成一个action对象，并使用dispatch提交
// 3.组件中dispatch的写法保持不变
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const channelStore = createSlice({
  name: "channel",
  initialState:{
    channelList:[]
  },
  reducers:{
    setChannels(state,action){
      state.channelList = action.payload
    }
  }
})

//异步请求部分
const { setChannels } =  channelStore.actions

const fetchChannelList = () =>{
  return async(dispatch) =>{
    const res = await axios.get('http://geek.itheima.net/v1_0/channels')
    dispatch(setChannels(res.data.data.channels))
  }
}

export { fetchChannelList }
const channelReducer = channelStore.reducer

export default channelReducer